<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>答题</title>
    <script src="js/sjw_pub_750.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script>
</head>
<body>
	<div class="box">
        <div class="music active" style="top: 0rem;"><img src="images/img040.png" alt=""><audio autoplay="autoplay" id="music" src="images/music.mp3"></audio></div>
		<div class="bg"></div>
		<div id="sub">
	        <div v-for="(item,index) in list" v-show="index == current">
	        	<div class="titles">第{{index+1}}/{{list.length}}题</div>
	            <div class="title" :data-status="item.status">{{item.title}}</div>
	            <p :data-status="lists.status" :data-state="lists.state" v-for="(lists,index) in item.children" @click="flag && choose(index,item,lists)" :class="{active:index == item.currents}"><font>{{lists.type}}</font> {{lists.name}} <font class="answer" v-show="answer">{{lists.status | filterA}}</font></p>
	        	<div class="tip" @click="tip(item)"><img src="images/img008.png"/> 提示</div>
	        	<p v-show="item.tip == true" class="tips">{{item.tips}}</p>
	        </div>
	        <div class="score" v-show="current == list.length">
	        	<div class="score_img"><img src="images/img009.png"/></div>
	        	<div class="succes">恭喜您，完成答题！</div>
	        	<div class="scores">{{grade}}</div>
	        	<div class="score_chance">当前剩余1次参与机会</div>
	        	<a href="" class="share">立即分享+1</a>
	        	<a @click="personal = true" class="again">再玩一次</a>
	        	<div class="ewm">
	        		<span><font>恭喜您</font>已获得抽奖资格,请于收到开奖信息后在<font>我的-领取红包</font>页面查看是否中奖</span>
	        	</div>
            </div>
            <div class="btns">
                <div class="btn" @click="submits()" v-show="current !== list.length">{{refers}}</div>
	            <div class="btn" @click="isDisabled && submit()" v-show="current !== list.length">{{refer}}</div>
            </div>
	        <div class="shadowz" v-show="personal == true" ></div>
	        <div class="personal" v-show="personal == true">
		    	<div class="personal_box">
		    		<div class="personal_title">个人资料</div>
			    	<input type="text" placeholder="姓名" />
			    	<input type="text" placeholder="手机" />
			    	<div class="personal_infor">以上信息仅用于兑奖时充值话费，如中奖者未填写的视为自动放弃</div>
			    	<span>立即提交</span>
		    	</div>
		    	<img @click="personal = false" class="closes" src="images/img006.png"/>
		    </div>
	   </div>
	</div>
</body>
</html>
<script>
    window.onload = function(){
        new Vue({
            el:"#sub",
            data:{
                current:0,
                list:[
                    {title:"新型冠病毒主要的传播途径是什么？",status:false,tips:'呼吸道、接触',tip:false,currents:-1,
                        children:[
                        {type:'A',"name":'呼吸道飞沫传播',status:false,state:false},
                        {type:'B',"name":'身体接触传播',status:false,state:false},
                        {type:'C',"name":'气溶胶传播',status:false,state:false},
                        {type:'D',"name":'呼吸道飞沫和接触传播呼吸道',status:true,state:false}
                    ]},
                    {title:"空气中是否有新型冠状病毒？还能开窗通风吗？",status:false,tips:'飞沫传播距离很短，通风有助降低空气中病毒浓度',tip:false,currents:-1,
                        children:[
                        {type:'A',"name":'飞沫传播距离很长，不可以',status:false,state:false},
                        {type:'B',"name":'飞沫传播距离很长，可以',status:false,state:false},
                        {type:'C',"name":'飞沫传播距离很短，但也不可以',status:false,state:false},
                        {type:'D',"name":'飞沫传播距离很短，通风有助空气中的病毒浓度降低',status:true,state:false}
                    ]},
                    {title:"空气中是否有新型冠状病毒？还能开窗通风吗？",status:false,tips:'飞沫传播距离很短，通风有助降低空气中病毒浓度',tip:false,currents:-1,
                        children:[
                        {type:'A',"name":'飞沫传播距离很长，不可以',status:false,state:false},
                        {type:'B',"name":'飞沫传播距离很长，可以',status:false,state:false},
                        {type:'C',"name":'飞沫传播距离很短，但也不可以',status:false,state:false},
                        {type:'D',"name":'飞沫传播距离很短，通风有助空气中的病毒浓度降低',status:true,state:false}
                    ]}
                ],
                refer:'下一题',
                refers:'上一题',
                grade:0,
                personal:false,
                frequency:0,
                answer:false,
                flag:true,
                isDisabled:true
            },
            methods:{
                submit:function(){
                    console.log(1)
                    var self = this;
                    this.flag = true;
                    this.isDisabled = false;
                    if(this.list[this.current].currents != '-1'){
                        this.answer = true;
                    }
                    setTimeout(function(){
                        self.isDisabled = true;
                    },1000)
                    // this.isDisabled = true;
                    setTimeout(function(){
                        if(self.current == self.list.length-1){
                         for(var i = 0;i<self.list.length;i++){
                            for(j=0;j<self.list[i].children.length;j++){
                                if(self.list[i].children[j].status == self.list[i].children[j].state){
                                   
                                    if(self.list[i].children[j].status){
                                        // this.grade +=Math.ceil((100/this.list.length));
                                        self.list[i].status = true;
                                        // console.log(i);
                                        
                                    }
                                }else{
                                    // this.list[i].status = false;
                                    // Object.defineProperty(self.list[i],'status',{
                                    //     writable:false,
                                    //     value:false
                                    // })
                                }
                            }
                            if(self.list[i].status == true){
                                self.grade +=Math.ceil((100/self.list.length));
                                if(self.grade >100){
                                    self.grade = 100;
                                }
                            }
                        }
                        self.current +=1;
                        
                    }else if(self.current == self.list.length-2){
                        self.refer = "提交";
                        self.current +=1;
                    }else if(self.current < self.list.length){
                        self.current +=1;
                        self.refer = "下一题";
                    }
                    self.answer = false;
                    }, 1000);
                   
                    
                },
                submits:function(){
                    this.refer = "下一题";
                    if(this.current<1){
                        return false;
                    }
                    this.current -=1;
                    if(this.list[this.current].currents != '-1'){
                        this.flag = false;
                    }else{
                        this.flag = true;
                    }
                    
                },
                choose:function(index,item,lists){
                    item.currents = index;
                    lists.state = !lists.state;
                },
                tip:function(item){
                    item.tip = true;
                    this.frequency +=1;
                    
                }
            },
            filters:{
                filterA(value){
                    if(value){
                        return '正确'
                    }
                }
            }
        })
    }
</script>